<template>
	<view>
		<view class="rad-list">
			<view class="rad-item" @click="naviTo(r.id)" v-for="(r, i) in RadioList" :key="r.id">
				<view class="rad-top">
					<image :src="r.cover" mode="widthFix"></image>
					<view class="top-volume">
						{{r.volume}}
					</view>
					<view class="top-title">
						{{r.title}}
					</view>
					<view class="top-btn">
						<image src="../../static/icons/bf.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="rad-info">
					<view class="rad-author">
						<view class="author-image">
							<image :src="r.author.web_url" mode="widthFix"></image>
						</view>
						<view class="author-name">
							{{r.author.user_name}}
						</view>
					</view>
					<view class="rad-btn">
						<view class="btn-zf">
							<image src="../../static/icons/zf.png" mode="heightFix"></image>
						</view>
						<view class="btn-like">
							<image src="../../static/icons/xh.png" mode="heightFix"></image>
							<view class="like-count">
								{{r.like_count}}
							</view>
						</view>
					</view>
				</view>
				
				<!-- <view class="rad-info">
					<view class="rad-author">
						<view class="author-image">
							<image :src="r.author.web_url" mode="widthFix"></image>
							<view class="author-name">
								{{r.author.user_name}}
							</view>
						</view>
						<view class="rad-btn">
							<image src="../../static/icons/zf.png" mode="widthFix"></image>
							<view class="btn-like">
								<image src="../../static/icons/xh.png" mode="widthFix"></image>
								<view class="like-count">
									{{r.like_count}}
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	
	const url = 'find/bymonth/8/'
	const date = new Date()
	const year = date.getFullYear()
	const month = ((date.getMonth() + 1) > 9) ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
	
	export default {
		data() {
			return {
				RadioList: []
			}
		},
		created() {
			http(url + year + '-' + month).then(res => {
				this.RadioList = res.data
				console.log(this.RadioList);
			})
		},
		methods: {
			naviTo(id) {
				uni.navigateTo({
					url: '../RadioContent/RadioContent?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.rad-list {
		padding: 5px;
		width: 750rpx;
	}
	
	.rad-item {
		padding: 10px;
		width: 100%;
		
		.rad-top {
			position: relative;
			width: 100%;
			overflow: hidden;
			
			image {
				width: 100%;
				border-radius: 10px;
			}
			
			.top-volume {
				padding: 10px;
				position: absolute;
				top: 0;
				left: 0;
				color: #fff;
				font-size: 12px;
			}
			
			.top-title {
				padding: 20px 10px;
				position: absolute;
				bottom: 0;
				left: 0;
				color: #fff;
				font-size: 12px;
				font-weight: 600;
			}
			
			.top-btn {
				margin: 15px;
				// z-index: 1000;
				position: absolute;
				bottom: 0;
				right: 0;
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
	
	.rad-info {
		padding: 10px 0;
		display: flex;
		justify-content: space-between;
		
		.rad-author {
			margin-left: 5px;
			flex: 3;
			display: flex;
			align-items: center;
			
			.author-image {
				margin-right: 5px;
				width: 50rpx;
				height: 50rpx;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 999px;
				}
			}
			
			.author-name {
				font-size: 10px;
				color: #8f8f8f;
			}
		}
		
		.rad-btn {
			display: flex;
			flex-direction: row-reverse;
			height: 50rpx;
			
			.btn-zf {
				margin-right: 5px;
				height: 100%;
				
				image {
					height: 100%;
				}
			}
			
			.btn-like {
				margin-right: 25px;
				display: flex;
				align-items: center;
				height: 100%;
				
				image {
					height: 100%;
				}
				
				.like-count {
					font-size: 10px;
					color: #828282;
				}
			}
		}
		
		// .rad-btn {
		// 	// flex: 1;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	flex-direction: row-reverse;
		// 	// height: 80rpx;
			
		// 	.btn-zf {
		// 		// flex: 5;
		// 		// width: 100%;
				
		// 		image {
		// 			width: 100%;
		// 			height: 100%;
		// 		}
		// 	}
			
		// 	.btn-like {
		// 		// flex: 5;
		// 		display: flex;
		// 		align-items: center;
		// 		// width: 100%;
				
		// 		image {
		// 			width: 100%;
		// 			height: 100%;
		// 		}
		// 	}
		// }
	}
</style>
